<!DOCTYPE HTML>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>旅游管理系统</title>
    <link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css'/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Custom Theme files -->
    <link th:href="@{/css/style.css}" rel='stylesheet' type='text/css'/>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--webfont-->
    <script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/login.js}"></script>
    <script th:src="@{/js/jquery.easydropdown.js}"></script>
    <!--Animation-->
    <script th:src="@{/js/wow.min.js}"></script>
    <link th:href="@{/css/animate.css}" rel='stylesheet' type='text/css'/>
    <link th:href="@{/css/custom.css}" rel='stylesheet' type='text/css'/>
    <script>
        new WOW().init();
    </script>
</head>
<body>
<div class="header">
    <div class="col-sm-8 header-left">
        <div class="logo">
            <a th:href="@{/}"><img th:src="@{/images/logo.png}" alt=""/></a>
        </div>
        <div class="menu">
            <a class="toggleMenu" href="javascript:void(0);"><img th:src="@{/images/nav.png}" alt=""/></a>
            <ul class="nav" id="nav">
                <li class="active"><a href="/source">旅游资源</a></li>
                <li><a href="/service">服务设施</a></li>
                <li><a href="/shop">购物信息</a></li>
                <li>
                    <a th:if="${session.user == null}" href="/tologin">登录</a>
                    <a th:if="${session.user != null}" href="/order">我的预定</a>
                </li>
                <li>
                    <a th:if="${session.user == null}" href="/toregist">注册</a>
                    <a th:if="${session.user != null}" th:href="@{/logout}">退出</a>
                </li>
                <div class="clearfix"></div>
            </ul>
            <script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
        </div>
    </div>
    <div class="col-sm-4 header_right">
        <div id="loginContainer">
            <a href="javascript:void(0);" id="loginButton">
                <img th:src="@{/images/login.png}">
                <a th:if="${session.user == null}" th:href="@{/tologin}" style="font-size: 14px;color: #ffffff">未登录</a>
                <span th:if="${session.user != null}" th:text="${session.user.u_name}">未登录</span>
            </a>
            <!--<div id="loginBox">-->
                <!--<form id="loginForm">-->
                    <!--<fieldset id="body">-->
                        <!--<fieldset>-->
                            <!--<label for="email">Email Address</label>-->
                            <!--<input type="text" name="email" id="email">-->
                        <!--</fieldset>-->
                        <!--<fieldset>-->
                            <!--<label for="password">Password</label>-->
                            <!--<input type="password" name="password" id="password">-->
                        <!--</fieldset>-->
                        <!--<input type="submit" id="login" value="Sign in">-->
                        <!--<label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>-->
                    <!--</fieldset>-->
                    <!--<span><a href="#">Forgot your password?</a></span>-->
                <!--</form>-->
            <!--</div>-->
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
<div class="banner">
</div>
<div class="content_top">
    <div class="container">
        <div class="col-md-4 bottom_nav">
            <div class="css_search">
                <input type="search" id="key" th:value="${key}" placeholder="搜索...">
            </div>
        </div>
        <div class="col-md-4 col-md-offset-4 content_dropdown1">
            <div class="content_dropdown">
                <select class="dropdown" tabindex="10" id="type" data-settings='{"wrapperClass":"metro"}'>
                    <option value="0">全部类别</option>
                    <option value="1" th:selected="${type == 1}">景点</option>
                    <option value="2" th:selected="${type == 2}">名胜古迹</option>
                    <option value="3" th:selected="${type == 3}">公园</option>
                    <option value="4" th:selected="${type == 4}">博物馆</option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="content_middle">
    <div class="container">
        <div class="content_middle_box">
            <div class="top_grid">
                <div class="col-md-3 index-grids" th:each="so,soStat : ${pageInfo.list}">
                    <div class="grid1" th:if="${(soStat.count) ge 1 && (soStat.count) le 4}">
                        <div class="view view-first">
                            <div class="index_img"><img th:src="${so.so_image_pre}" class="img-responsive" alt=""/>
                            </div>
                            <div class="sale">￥<span th:text="${so.so_price}"></span></div>
                            <div class="mask">
                                <div class="info"><a th:href="@{/source/detail(id=${so.so_id})}" style="color: #ffffff"><i class="search"> </i> 查看详情</a></div>
                            </div>
                        </div>
                        <i class="home2"></i>
                        <div class="inner_wrap">
                            <h3 th:text="${so.so_des_pre}"></h3>
                            <ul class="star1">
                                <h4 class="green" th:text="${so.so_name}"></h4>
                                <li><a href="javascript:void(0);"> <img th:src="@{/images/star1.png}" alt="">(236)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="middle_grid wow fadeInUp" data-wow-delay="0.4s">
                <div class="col-md-3 index-grids" th:each="so,soStat : ${pageInfo.list}">
                    <div class="grid1" th:if="${(soStat.count) ge 5 and (soStat.count) le 8}">
                        <div class="view view-first">
                            <div class="index_img"><img th:src="${so.so_image_pre}" class="img-responsive" alt=""/>
                            </div>
                            <div class="sale">￥ <span th:text="${so.so_price}"></span></div>
                            <div class="mask">
                                <div class="info"><a th:href="@{/source/detail(id=${so.so_id})}" style="color: #ffffff"><i class="search"> </i> 查看详情</a></div>
                            </div>
                        </div>
                        <i class="home2"></i>
                        <div class="inner_wrap">
                            <h3 th:text="${so.so_des_pre}"></h3>
                            <ul class="star1">
                                <h4 class="green" th:text="${so.so_name}"></h4>
                                <li><a href="javascript:void(0);"> <img th:src="@{/images/star1.png}" alt="">(236)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="top_grid wow fadeInRight" data-wow-delay="0.4s">
                <div class="col-md-3 index-grids" th:each="so,soStat : ${pageInfo.list}">
                    <div class="grid1" th:if="${(soStat.count) ge 9 and (soStat.count) le 12}">
                        <div class="view view-first">
                            <div class="index_img"><img th:src="${so.so_image_pre}" class="img-responsive" alt=""/>
                            </div>
                            <div class="sale">￥<span th:text="${so.so_price}"></span></div>
                            <div class="mask">
                                <div class="info"><a th:href="@{/source/detail(id=${so.so_id})}" style="color: #ffffff"><i class="search"> </i> 查看详情</a></div>
                            </div>
                        </div>
                        <i class="home2"></i>
                        <div class="inner_wrap">
                            <h3 th:text="${so.so_des_pre}">Lorem Ipsum is simply dummy text</h3>
                            <ul class="star1">
                                <h4 class="green" th:text="${so.so_name}">Vision Agency</h4>
                                <li><a href="javascript:void(0);"> <img th:src="@{/images/star1.png}" alt="">(236)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="bottom_grid wow bounce" data-wow-delay="0.4s">
                <div class="col-md-3 index-grids" th:each="so,soStat : ${pageInfo.list}">
                    <div class="grid1" th:if="${(soStat.count) ge 13 and (soStat.count) le 16}">
                        <div class="view view-first">
                            <div class="index_img"><img th:src="${so.so_image_pre}"
                                                        class="img-responsive" alt=""/></div>
                            <div class="sale">￥<span th:text="${so.so_price}"></span></div>
                            <div class="mask">
                                <div class="info"><a th:href="@{/source/detail(id=${so.so_id})}" style="color: #ffffff"><i class="search"> </i> 查看详情</a></div>
                            </div>
                        </div>
                        <i class="home2"></i>
                        <div class="inner_wrap">
                            <h3 th:text="${so.so_des_pre}">Lorem Ipsum is simply dummy text</h3>
                            <ul class="star1">
                                <h4 class="green" th:text="${so.so_name}">Vision Agency</h4>
                                <li><a href="javascript:void(0);"> <img th:src="@{/images/star1.png}" alt="">(236)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="container">
                <div class="row">
                    <!-- Pagination Area Start -->
                    <nav aria-label="Page navigation">
                        <ul class="pagination" >
                            <!--上一页 start-->
                            <li><a th:if="${pageInfo.pageNum eq 1}" href="javascript:void(0);"
                                   aria-label="Previous">上一页</a></li>
                            <li><a th:if="${pageInfo.pageNum gt 1}"
                                   th:href="@{/source(key=${key}, type=${type},currentPage=${pageInfo.pageNum - 1})}"
                                   aria-label="Previous">上一页</a></li>
                            <!--上一页 end-->
                            <span th:each="currentPage : ${pageInfo.navigatepageNums}">
                            <li><a th:href="@{/source(key=${key}, type=${type},currentPage=${currentPage})}" th:text="${currentPage}"></a></li>
                            </span>
                            <!--下一页 start-->

                            <li><a th:if="${pageInfo.pageNum eq pageInfo.pages}" href="javascript:void(0);"
                                   aria-label="Previous">下一页</a></li>
                            <li><a th:if="${pageInfo.pageNum lt pageInfo.pages}"
                                   th:href="@{/source(key=${key}, type=${type},currentPage=${pageInfo.pageNum + 1})}"
                                   aria-label="Previous">下一页</a></li>
                            <!--下一页 end-->
                        </ul>
                    </nav>
                    <!-- Pagination Area End -->
                </div>
            </div>
        </div>

        <div class="offering">
            <h2>服务范围</h2>
            <h3>Service Range</h3>
            <ul class="icons wow fadeInUp" data-wow-delay="0.4s">
                <li><i class="icon1"> </i><span class="one"> </span></li>
                <li><i class="icon2"> </i><span class="two"> </span></li>
                <li><i class="icon3"> </i><span class="three"> </span></li>
                <li><i class="icon4"> </i><span class="four"> </span></li>
                <li><i class="icon5"> </i></li>
            </ul>
            <div class="real">
                <h4>功能</h4>
                <div class="col-sm-6">
                    <ul class="service_grid">
                        <i class="s1"> </i>
                        <li class="desc1 wow fadeInRight" data-wow-delay="0.4s">
                            <p>查询本地的各旅游景点、名胜古迹、公园、博物馆等旅游资源的地理位置、名称、地址、电话等信息</br>
                                查询本地的各旅游景点、名胜古迹、公园、博物馆等旅游资源的地理位置、名称、地址、电话等信息
                            </p>
                        </li>
                        <div class="clearfix"></div>
                    </ul>
                </div>
                <div class="col-sm-6">
                    <ul class="service_grid">
                        <i class="s2"> </i>
                        <li class="desc1 wow fadeInRight" data-wow-delay="0.4s">
                            <p>查询本地的各旅游景点、名胜古迹、公园、博物馆等旅游资源的地理位置、名称、地址、电话等信息</br>
                                查询本地的各旅游景点、名胜古迹、公园、博物馆等旅游资源的地理位置、名称、地址、电话等信息
                            </p>
                        </li>
                        <div class="clearfix"></div>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
</div>
<div th:include="footer :: th_footer"></div>
<script type="text/javascript">

    $("#key").blur(function () {
        var key = $("#key").val();
        var type = $("#type").children('option:selected').val();
        location.href = "/source?key=" + key + "&type=" + type;
    });
    $("#type").change(function () {
        var type = $(this).children('option:selected').val();
        var key = $("#key").val();
        location.href = "/source?key=" + key + "&type=" + type;
    });
</script>
</body>
</html>